<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
		function allowDrop(ev)
		{
		ev.preventDefault();
		}
		
		function drag(ev)
		{
		ev.dataTransfer.setData("Text",ev.target.id);
		}
		
		function drop(ev)
		{
		ev.preventDefault();
		var data=ev.dataTransfer.getData("Text");
		ev.target.appendChild(document.getElementById(data));
		}
		</script>
	</head>
	<body>
		<div id="div1" ondrop="drop(event)"
		ondragover="allowDrop(event)"></div>
		<img id="drag1" src="img_logo.gif" draggable="true"
		ondragstart="drag(event)" width="336" height="69" />
		
		<p>拖放（Drag 和 drop）是 HTML5 标准的组成部分。拖放是一种常见的特性，即抓取对象以后拖到另一个位置。</p>
		<p>设置元素为可拖放 &lt;img draggable="true" /&gt;</p>
		<p>拖动什么 - ondragstart 和 setData()
		dataTransfer.setData() 方法设置被拖数据的数据类型和值：<br></p>
		<p>放到何处 - ondragover-->调用 ondragover 事件的 event.preventDefault() 方法</p>
		<p>进行放置 - ondrop</p>
	</body>
</html>
